<template>
  <div class="addUsual">
    <div class="top-bar">
      <span class="cancle" @click="cancelUsual">{{ $lang.cancel }}</span>
      <span class="add">{{ $lang.addCommonExpression }}</span>
      <span
        :class="submitActive ? 'submitActive' : 'submit'"
        @click="addQuickUsualReply"
        >{{ $lang.done }}</span
      >
    </div>
    <van-field
      v-model="message"
      @focus="getScroll"
      ref="getScroll"
      autosize
      rows="5"
      type="textarea"
      maxlength="100"
      :placeholder="$lang.inputUsualReplies"
      show-word-limit
      class="inputBox"
    />
  </div>
</template>

<script>
import { Dialog } from "vant";

export default {
  name: "addUsual",
  data() {
    return {
      message: "",
      rowsNumber: 22,
    };
  },
  computed: {
    submitActive() {
      return this.message.length ? true : false;
    },
  },
  methods: {
    back() {
      let mailId = this.$route.params.id;
      this.$router.push({
        path: `/emaildetail/${mailId}`,
        query: {
          index: this.$route?.query?.index,
        },
      });
    },
    cancelUsual() {
      if (this.message.length > 0) {
        Dialog.confirm({
          message: this.$lang.sureCancel,
          confirmButtonText: this.$lang.yes,
          cancelButtonText: this.$lang.no,
          className: "errSelfDialog",
        })
          .then(() => {
            // on confirm
            this.message = "";

            this.back();
          })
          .catch(() => {});
      } else {
        this.back();
      }
    },
    // 修复fiexd在ios中失效
    getScroll() {
      const el = this.$refs.getScroll;
      console.warn("scrollIntoView", el.$refs.input.scrollIntoView);

      // window.setTimeout(() => {
      //   el.$refs.input.scrollIntoView(); // 多数手机
      //   document.body.scrollTop = document.body.scrollHeight; // iOS部分手机
      // }, 300);
    },
    async addQuickUsualReply() {
      if (this.submitActive) {
        const res = await this.Api.creatQuickReplyUsual(this.message);
        const { success } = res?.data;
        if (success) {
          this.$store.commit("changeShowReply", true);
          // this.$toast.loading(this.$lang.successSave)
          this.back();
        }else{
          this.$toast.loading(this.$lang.successFail)
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
.addUsual {
  height: 100%;
  width: 100%;
  .top-bar {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    align-items: center;
    background: #ffffff;
    align-items: center;
    position: relative;
    background: #fff;
    .cancle {
      min-width: 32px;
      font-size: 16px;
      color: #323233;
    }

    .add {
      flex: 1;
      font-size: 18px;
      color: #323233;
      text-align: center;
      font-weight: 500;
    }

    .submit {
      min-width: 32px;
      opacity: 0.3;
      font-size: 16px;
      color: #00c00e;
    }

    .submitActive {
      min-width: 32px;
      font-size: 16px;
      color: #00c00e;
      text-align: right;
      line-height: 16px;
      font-weight: 400;
    }
  }

  .inputBox {
    width: 100%;
    padding: 0 9px 0 16px;
    // height: calc(100% - 44px);

    /deep/ .van-field__word-limit {
      margin-top: 20px;
      // height: 20px;
      // position: fixed;
      // right: 16px;
      // bottom: 16px;
      // margin-bottom: constant(safe-area-inset-bottom);
      // margin-bottom: env(safe-area-inset-bottom);
    }

    /deep/ .van-field__body {
      // height: calc(100% - 20px);
      position: relative;
      textarea {
        font-size: 14px;
        color: #323233;
        line-height: 22px;
        font-weight: 400;
      }
      .van-field__control {
        // position: absolute;
        // top: 0;
      }
    }
  }
}
</style>
